<template>
	<view class="page">
		<!--切换身份-->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog 
				type="info" 
				cancelText="取消" 
				confirmText="确认" 
				title="温馨提示" 
				@confirm="dialogConfirm"
				@close="dialogClose">
				<view class="sub-title">当前为<text style="font-weight:600;">{{ userType==2 || userType==1?'车队':'个人' }}身份</text>，是否需要切换至{{ userType==0?'车队':'个人' }}身份？</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertDialog2" type="dialog">
			<view class="userType">
				<view class="title">身份选择</view>
				<view class="user-list">
					<view><view class="item" :data-index="0" @tap="changeType">
						<image class="car" src="https://oos-cn.ctyunapi.cn/front-end/static/static/icon1.png"></image><image class="gou" :class="(activeIndex === 1 || activeIndex === 2) && 'active'" :src="(otherIconList[5] && otherIconList[5].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/static/Select.png'"></image></view>
						<view class="t2">车队身份</view>
					</view>
					<view><view class="item"  :data-index="1" @tap="changeType"><image class="user" src="https://oos-cn.ctyunapi.cn/front-end/static/static/mime_1.png"></image><image class="gou" :class="activeIndex == 0 && 'active'" :src="(otherIconList[5] && otherIconList[5].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/static/Select.png'"></image></view>
						<view class="t2">个人身份</view></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var https_1 = require('../../api/https.js');
	var app = getApp()
	export default {
		options: {
            styleIsolation: 'shared'
        },
		name: "userTypePopup",
		data(){
			return {
				activeIndex:0,
				otherIconList:app.globalData.otherIconList
			}
		},
		props:{
			userType:{
				default:0,
				type:Number
			},
			deductMode:{
				default:'',
				type:String
			}
		},
		methods:{
			changeType(e){
				let selectIndex = e.currentTarget.dataset.index
				console.log(selectIndex,this.activeIndex)

				if(selectIndex === 0){
					if(this.activeIndex === 2){
						this.$refs.alertDialog2.close()
						return false
					}else {
						this.changeType2();
					}
				}else {
					if(this.activeIndex === 2){
						this.changeType2();
					}else {
						this.$refs.alertDialog2.close()
						return false
					}
				}
			},
			changeType2(){
				let changeType = 0
				let that = this
				if(this.deductMode === 'TeamAccount'){
					if(this.userType == 2 || this.userType == 1){
						changeType = 0
					}else {
						changeType = 1
					}
				}
				if(this.deductMode === 'LeaguerAccount'){
					if(this.userType == 2 || this.userType == 1){
						changeType = 0
					}else {
						changeType = 2
					}
				}
				uni.showLoading({title: '切换中...', mask: true})
				https_1.changeUser({changeType}).then(function (res) {
					if (res.code == 0) {
						uni.setStorageSync('token', res.data);
						that.activeIndex = (that.userType == 2 || that.userType == 1)?0:2
						that.$emit('dialogConfirm',that.activeIndex)
						uni.hideLoading();
					}
				});
				
			},
			dialogConfirm(){
				this.$refs.alertDialog.close()
				this.$refs.alertDialog2.open()
				this.activeIndex = (this.userType == 2 || this.userType == 1)?2:0
			},
			dialogClose(){
				this.$refs.alertDialog.close()
			},
			switchType(e){
				this.activeIndex = e.currentTarget.dataset.index
			},
		},
	}
</script>

<style lang="less">
	@import "../../commin/commin.less";
	.sub-title {
		font-size: 25rpx;
		font-family: PingFang SC;
		// font-weight: 500;
		color: #606266;
	}
	.userType{
		width: 680rpx;
		height: 354rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.title{
			font-size: 34rpx;
			color: #303133;
			text-align: center;
			padding-top: 48rpx;
			font-weight: 500;
		}
		.user-list{
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			.item{
				width: 120rpx;
				height: 120rpx;
				background-color: #F2F2F2;
				border-radius: 50%;
				position: relative;
				z-index: 1;
				.car{
					width: 59rpx;
					height: 47rpx;
					padding-top: 40rpx;
				}
				.user{
					width: 45rpx;
					height: 49rpx;
					padding-top: 40rpx;
				}
				.gou{
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					display: none;
					z-index: 1;
					bottom: 0;
					right: 0;
				}
				.active{
					display: block;
				}
			}
			.t2{
				color: #606266;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
